<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>localStorage存储</h2>
<button onclick="save()">保存数据</button>
<button onclick="read()">读取数据</button>
<button onclick="delet()">删除数据</button>
<button onclick="cle()">清空数据</button>

</body>
</html>
<!--
两个都是js用来在浏览器上存储数据
sessionStorage 浏览器关闭就消失
localStorage   理论上永久保存 需要手动删除

-->
<script>
    let student = {
        name:'zs',
        age:20
    }

    /*本地存储的格式：key - value*/
    function save() {
        localStorage.setItem('msg','local');
        //存储对象时先转为字符串保证数据
        localStorage.setItem("stu",JSON.stringify(student));

        sessionStorage.setItem('msg','local');
        //存储对象时先转为字符串保证数据
        sessionStorage.setItem("stu",JSON.stringify(student));

    }
    function read() {
        console.log(localStorage.getItem('msg'));
        const s = localStorage.getItem('stu');
        console.log(JSON.parse(s).age);//读取的时候转成对象 方便获取

        console.log(sessionStorage.getItem('msg'));
        const s1 = sessionStorage.getItem('stu');
        console.log(JSON.parse(s1).age);//读取的时候转成对象 方便获取
    }
    function delet() {
        localStorage.removeItem('msg');
        localStorage.removeItem('stu')

        sessionStorage.removeItem('msg');
        sessionStorage.removeItem('stu')

    }
    function cle() {
        localStorage.clear();

        sessionStorage.clear();


    }


</script>